import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const SelectAccount = (props) => {
  const { loading, organizationAuthAdminList, visible = {}, onClose, onOk, disabledList = [], title, onChange } = props;
  const { show = false, details = [], name = [] } = visible;
  const childRef = useRef();
  const modalProps = {
    title: title,
    width: 1200,
    visible: typeof visible === 'boolean' ? visible : show,
    zIndex: 1001,
    okText: '确认',
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedName, setSelectName] = useState([])
  const rowSelection = {
    type: 'checkBox',
    onSelect: (record, selected, selectedRows) => {
      const { id, username } = record;
      if (selected) {
        setSelectedRowKeys([...selectedRowKeys, record]);
        setSelectName([...selectedName, username])
      } else {
        setSelectedRowKeys(
          selectedRowKeys.filter((item) => {
            return item.id != id;
          }),
        );
        setSelectName(
          selectedName.filter((item) => {
            return item != username;
          }),
        );
      }
    },
    onSelectAll: (selected, selectedRowsKey, changeRows) => {
      let selectedRows = selectedRowsKey.filter((val) => {
        if (val) {
          return true;
        }
      });
      if (selected) {
        setSelectedRowKeys([
          ...selectedRowKeys,
          ...selectedRows.reduce((item, val) => {
            let flag = true;
            selectedRowKeys.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });
            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        ]);

        setSelectName([
          ...selectedName,
          ...selectedRows.reduce((item, val) => {
            let flag = true;
            selectedRowKeys.forEach((o) => {
              if (o == val.username) {
                flag = false;
              }
            });
            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        ]);
      } else {
        setSelectedRowKeys(
          selectedRowKeys.reduce((item, val) => {
            let flag = true;
            changeRows.forEach((o) => {
              if (o.id == val.id) {
                flag = false;
              }
            });

            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        );
        setSelectName(
          selectedName.reduce((item, val) => {
            let flag = true;
            changeRows.forEach((o) => {
              if (o.username == val.username) {
                flag = false;
              }
            });

            if (flag) {
              return [...item, val];
            }
            return item;
          }, []),
        );
      }
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };
  useEffect(() => {
    if (show) {
      setSelectedRowKeys(details);
    } else {
      setSelectedRowKeys([]);
      setSelectName([])
    }
  }, [show]);
  // 搜索参数
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };

  const searchItems = [
    {
      label: '用户姓名或手机',
      name: 'keyword',
    },
  ];
  // table 表头
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow width={24} url={e}></PopImgShow>;
      },
    },
  ];
  return (
    <>
      <Modal
        {...modalProps}
        onCancel={onClose}
        onOk={() => {
          onChange && onChange(selectedRowKeys, selectedName);
          onClose();
        }}
      >
        <TableDataBlock
          rowSelection={rowSelection}
          cRef={childRef}
          loading={loading}
          searchItems={searchItems}
          columns={getColumns}
          rowKey={(record) => `${record.id}`}
          dispatchType="weCom/fetchSearchOrganizationAdmin"
          {...organizationAuthAdminList}
        ></TableDataBlock>
      </Modal>
    </>
  );
};

export default connect(({ loading, weCom }) => ({
  loading: loading.models.weCom,
  ...weCom,
}))(SelectAccount);
